
<script>
import request from '@/utils/request'
// import { Loading } from '@cci/cui'
import DatagroupSmallTree from '@/components/DatagroupTree'

export default {
  name:'specialObj',
  components: {
    DatagroupSmallTree
  },
  data(){
    return {
      specailObjIsShow: true,
      showTree: this.showSmallTree || false,
      refName: "smallTree",
      // defaultCheckedSmallNodes: [],
      // checkedKeys: [],
      // checkedNodes: [],

      tree: {
        checkList: [],
        lazy: true,
        expand: false,
        width: '250px',
        height: '300',
        accordion: false,
        isShowHeader: false,
        treeMenuButtonList: [],
        treeOperateButtonList: [],
        search: {},
        showCheckbox: true,
        selectTree: {},
        nextNodeKey: 'node',
        nextNodeValue: '',
        idKey: 'deptId',
        title: '',
        getNextChildNode: this.getNextNode,
      },
      getNextNodeUrl: '/v1/yq/datagroup/findBusiNextChildNodeTree',

    }
  },
  // 通过props拿到父组件的值，通过emit传值给父组件，然后通过computed 的get()获取父组件的值，通过set()传值给父组件
  props: {
    value: [Object, Array, String, Number],
    objId: {
      type: String,
      default: ''
    },
    showSmallTree: {
      type: Boolean,
      default: false
    },
    reloadTreeFlag: {
      type: Boolean,
      default: true
    }
  },
  // watch: {
  //   objId: {
  //     immediate: true,
  //     handler() {
  //       this.getInitInfo()
  //     }
  //   }
  // },
  computed: {
    radio: {
      get() {
        return this.value.radioVal
      },
      set(val) {
        this.$emit('changeRadio', val)
      }
    },
    checkedTreeNodes: {
      get() {
        return this.value.checkedTreeNodes
      },
      set(val) {
        this.$emit('checkTree', val)
      }
    }
  },
  methods: {
    getHalfANdAllCheckedList() {
      let allChecked = []
      allChecked.push(this.$refs[this.refName].getChecked())
      if (this.$refs[this.refName].getHalfChecked().length !== 0) {
        allChecked.push(this.$refs[this.refName].getHalfChecked())
      }
      return allChecked
    },
    getNextNode(params, url = this.getNextNodeUrl) {
      delete params.node
      // if (this.reloadTreeFlag) {
        params.objId = this.objId ? this.objId : ''
      // }
      return request({
        url,
        method: 'get',
        params
      })
    },
    empty() { },
    loaded() { },
    handleRadioChange(val) {
      this.radio = val
      if (val === '3') {
        this.showTree = true;
      } else {
        this.showTree = false;
      }
    },
    handleSelectOperators(){ },
    checkNode(val, checkedKeys, checkedNodes, halfCheckedKeys, halfCheckedNodes) {
      this.checkedTreeNodes= val
      this.$emit("getChecked", val, checkedKeys, checkedNodes, halfCheckedKeys, halfCheckedNodes)
    },
    // eslint-disable-next-line
    renderContent(h){
      return (
        <div>
          <div class="common-box">
            <div class="commonLine">
              <div class="radio-wrapper">
                <c-radio-group
                  value = {this.radio}
                  on-input = { this.handleRadioChange }>
                  <div class="radioBox"><c-radio label="1">本机构</c-radio></div>
                  <div class="radioBox"><c-radio label="2">本机构及下级机构</c-radio></div>
                  <div class="radioBox"><c-radio label="3">其他机构及下级机构</c-radio></div>
                </c-radio-group>
              </div>
            </div>
          </div>
          <div v-show = { this.showTree && this.radio == "3" } class="common-box special-jg">
            <DatagroupSmallTree
              ref = { this.refName }
              nodeChildrenKey = { "childrenModel" }
              tree = { this.tree }
              on-check-node = { this.checkNode }
              on-tree-empty = { this.empty }
              on-tree-loaded = { this.loaded }
            ></DatagroupSmallTree>
          </div>
        </div>
      )
    }
  },
  // eslint-disable-next-line
  render(h){
    if (this.specailObjIsShow) {
      return (
        <div class="code-wrapper">
          {
            this.renderContent(h)
          }
        </div>
      )
    }
  }
}
</script>

<style lang="scss">
.code-wrapper{
  .el-cascader,.el-select{
    display: inline-block;
    width: 100%;
  }
  .radioBox{
    margin: 10px;
  }
  .special-jg{
    margin-top: 0 !important;
    height: 250px;
  }
  .wrap-tree{
    width: 100%;
    margin-top: 0;
    .el-select-dropdown__list{
      padding-top: 0;
      .el-tree{
        margin-top: 0;
      }
    }
    .el-tree{
      width: auto;
      overflow: hidden;
    }
  }
}
</style>
